<!-- 业绩激励 -->
<template>
    <div class="performanceIncentiveHandle">
        <el-breadcrumb v-if="!viewDetailReceiveId" separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/performanceIncentive' }">业绩激励标准</el-breadcrumb-item>
            <el-breadcrumb-item>{{typeMap[type]}}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 查看 -->
        <div v-if="type === 'view'">
            <div v-if="selectedTypeValue ==='month'">
                <div>计提分配标准：</div>
                <div v-for="(item, index) in currentRevenueStandard.nodeList" :key="index">
                    <h3>{{item.developName}}</h3>
                    <el-table
                            :data="item.departSettingList"
                            border
                            class="mt20"
                            style="width: 40%">
                        <el-table-column
                                type="index"
                                label="序号"
                                align="center"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="departmentName"
                                align="center"
                                label="部门">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="150"
                                prop="departmentProportion"
                                label="分配比例(%)">
                            <template slot-scope="scope">
                                {{scope.row.departmentProportion}}%
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 3.0取消年 -->
            <!--<div v-else>
                <div>计提节点： {{calNode[currentRevenueStandard.calNode+1]}}</div>
                <div class="mt20">集团管理计提比例： {{currentRevenueStandard.groupProportion}}%</div>
                <el-table
                        :data="currentRevenueStandard.nodeList[0].departSettingList"
                        border
                        class="mt20"
                        style="width: 40%">
                    <el-table-column
                            type="index"
                            label="序号"
                            align="center"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="departmentName"
                            align="center"
                            label="部门">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            width="150"
                            prop="departmentProportion"
                            label="分配比例(%)">
                        <template slot-scope="scope">
                            {{scope.row.departmentProportion}}%
                        </template>
                    </el-table-column>
                </el-table>
            </div>-->
        </div>
        <!-- 新增编辑 -->
        <div v-else>
            <div class="chooseType" v-if="stepIndex === 0">
                <h3>选择标准规则生效类型</h3>
                <el-radio v-model="selectedTypeValue" label="month">月度</el-radio>
                <el-radio v-model="selectedTypeValue" label="year">年度</el-radio>
                <div style="margin-top: 100px">
                    <el-button @click="returnList">取消</el-button>
                    <el-button type="primary" @click="selectDate">下一步</el-button>
                </div>
            </div>
            <div v-if="stepIndex === 1">
                <h3>请选择标准类型</h3>
                <hr/>
                <el-button class="mt20" type="primary" icon="el-icon-plus" @click="selectDialog(true)">选择标准</el-button>

                <div class="selectedType" v-if="currentRevenueStandard.version">
                    <div>提取标准：{{extractStandard[currentRevenueStandard.extractStandard]}}</div>
                    <div>佣金来源：{{commSource[currentRevenueStandard.source]}}</div>
                    <div>提取规则：{{extractCategory[currentRevenueStandard.extractCategory]}}</div>
                    <div>版 &nbsp; &nbsp; &nbsp; 本：{{currentRevenueStandard.version}}</div>
                    <div>规则日期：{{ruleEffect[currentRevenueStandard.ruleEffect]}}</div>
                </div>

                <div style="margin-top: 100px">
                    <!--<el-button @click="stepIndex = 0" v-if="type==='new'">上一步</el-button>-->
                    <el-button @click="returnList">取消</el-button>
                    <el-button class="mt20" type="primary" @click="changeStepIndex(2)">下一步</el-button>
                </div>

                <el-dialog
                        title="选择标准"
                        :visible.sync="selectDialogVisible"
                        width="500px">
                    <div>
                        <el-row :span="24" :gutter="20">
                            <el-col :span="18">
                                <el-input
                                        placeholder="请输入内容"
                                        prefix-icon="el-icon-search"
                                        size="normal"
                                        v-model="selectDialogInputValue">
                                </el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-button size="normal" type="primary" @click="getRevenueStandardList">查询</el-button>
                            </el-col>
                        </el-row>

                        <div class="mt20" style="height: 300px; overflow: auto">
                            <div v-for="item in revenueStandardList" class="selectedInterval-item">
                                <el-radio class="mt20" v-model="revenueStandardValue" :label="item.id">
                                    <div class="selectedInterval-item-row">
                                        提取标准：{{extractStandard[item.extractStandard]}}
                                    </div>
                                    <div class="selectedInterval-item-row">佣金来源：{{commSource[item.source]}}</div>
                                    <div class="selectedInterval-item-row">
                                        提取规则：{{extractCategory[item.extractCategory]}}
                                    </div>
                                    <div class="selectedInterval-item-row">版 &nbsp; &nbsp; &nbsp; 本：{{item.version}}
                                    </div>
                                    <div class="selectedInterval-item-row">规则日期：{{ruleEffect[item.ruleEffect]}}</div>
                                    <el-button type="text" class="viewDetail" @click="viewDetail(item.id)">查看详情
                                    </el-button>
                                </el-radio>
                            </div>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="selectDialog(false)">绑 定</el-button>
                        <el-button @click="selectDialogVisible = false">取 消</el-button>
                    </span>
                </el-dialog>
            </div>
            <div v-if="stepIndex === 2 && selectedTypeValue === 'month'">
                <el-tabs type="border-card" v-model="tabsIndex">
                    <el-tab-pane v-for="(item,index) in currentRevenueStandard.nodeList" :key="index" :label="(item.developerName || item.developName) + '分配标准'" :name="String(index)">
                        <div class="mt20">
                            <el-button class="mb20" type="primary" @click="selectDepartment(true)">选择分配部门</el-button>
                        </div>
                        <el-table v-if="item.departSettingList && item.departSettingList.length"
                                  :data="item.departSettingList"
                                  border
                                  style="width: 600px">
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    align="center"
                                    width="50">
                            </el-table-column>
                            <el-table-column
                                    prop="departmentName"
                                    align="center"
                                    label="部门">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    width="150"
                                    label="分配比例(%)">
                                <template slot-scope="scope">
                                    <el-input size="mini" @input="checkProportion(scope.row.departmentProportion, index, scope.$index)" v-model="scope.row.departmentProportion"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="操作">
                                <template slot-scope="scope">
                                    <a href="javascript:;;" @click="delDepartmentProportion(scope, item)">删除</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
                <div class="mt50">
                    <el-button @click="stepIndex = 1">上一步</el-button>
                    <el-button type="primary" @click="checkMonth">保存</el-button>
                </div>
            </div>
            <!-- <div v-if="stepIndex === 2 && selectedTypeValue === 'year'">
                 <div>
                     <span>计提节点：</span>
                     <el-select v-model="currentRevenueStandard.calNode" placeholder="请选择">
                         <el-option
                                 v-for="item in calcNodeOptions"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                         </el-option>
                     </el-select>
                 </div>
                 <div>
                     <h4>集团管理计提比例</h4>
                     <el-input class="w200 mr10" size="mini" @input="checkGroupProportion(currentRevenueStandard.groupProportion, 'groupProportion')" v-model="currentRevenueStandard.groupProportion"></el-input>
                     %
                 </div>
                 <hr class="mt20 mb20"/>
                 <div class="mt20">
                     <h3>部门应发占比</h3>
                     <el-button class="mb20" type="primary" @click="selectDepartment(true)">选择分配部门</el-button>
                 </div>
                 <el-table
                         v-if="currentRevenueStandard.nodeList[0].departSettingList && currentRevenueStandard.nodeList[0].departSettingList.length"
                         :data="currentRevenueStandard.nodeList[0].departSettingList"
                         border
                         style="width: 100%">
                     <el-table-column
                             type="index"
                             label="序号"
                             align="center"
                             width="50">
                     </el-table-column>
                     <el-table-column
                             prop="departmentName"
                             align="center"
                             label="部门">
                     </el-table-column>
                     <el-table-column
                             align="center"
                             width="150"
                             label="分配比例(%)">
                         <template slot-scope="scope">
                             <el-input size="mini" @input="checkProportion(scope.row.departmentProportion, 0, scope.$index)" v-model="scope.row.departmentProportion"></el-input>
                         </template>
                     </el-table-column>
                     <el-table-column
                             align="center"
                             label="操作">
                         <template slot-scope="scope">
                             <a href="javascript:;;" @click="delDepartmentProportion(scope, currentRevenueStandard.nodeList[0])">删除</a>
                         </template>
                     </el-table-column>
                 </el-table>
                 <div class="mt50">
                     <el-button @click="stepIndex = 1">上一步</el-button>
                     <el-button type="primary" @click="checkYear">保存</el-button>
                 </div>
             </div>-->
            <el-dialog
                    title="添加部门"
                    :visible.sync="departmentDialogVisible"
                    width="550px"
            >
                <el-transfer
                        filterable
                        filter-placeholder="请输入部门名称"
                        :titles="['全部', '已选中']"
                        v-model="department"
                        :props="{
                      key: 'id',
                      label: 'departmentName'
                    }"
                        :data="departmentList">
                </el-transfer>
                <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="selectedDepartment">确 定</el-button>
                <el-button @click="departmentDialogVisible = false">取 消</el-button>
            </span>
            </el-dialog>

            <el-dialog
                    title="查看详情"
                    :visible.sync="viewDetailVisible"
                    width="600px">
                <revenue-settlement-handle style="max-height: 500px; overflow: auto;" :viewDetailReceiveId="viewDetailSendId"/>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="viewDetailVisible = false">取 消</el-button>
                </span>
            </el-dialog>
        </div>
    </div>

</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'
    import {extractStandard, extractCategory, ruleEffect, calNode, commSource} from '../fieldMap'
    import revenueSettlementHandle from './revenueSettlementHandle'

    export default {
        name: 'performanceIncentiveHandle',
        data() {
            return {
                type: "new",
                typeMap: {
                    new: '新建',
                    edit: '编辑',
                    view: '查看'
                },
                selectedTypeValue: "month",
                stepIndex: 1,
                selectDialogVisible: false,
                selectDialogInputValue: "",
                revenueStandardValue: "",

                tabsIndex: '0',

                departmentDialogVisible: false,
                department: [],
                departmentList: [],
                departmentListMap: {},
                revenueStandardList: [],
                currentRevenueStandard: {},
                extractStandard, extractCategory, ruleEffect, calNode, commSource,

                viewDetailVisible: false,
                viewDetailSendId: 0
            }
        },
        created() {
            this.getAllDepartmentList();
            this.type = this.$route.query.type || 'new';
            this.selectedTypeValue = this.$route.query.dateType || 'month';

            if (this.type !== 'new') {
                this.stepIndex = 1;
                this.getSingleRS(this.selectedTypeValue, this.$route.query.id)
            }
        },
        props: ['viewDetailReceiveId'],
        watch: {
            viewDetailReceiveId: {
                handler(id) {
                    console.log(id);
                    if (id) {
                        setTimeout(() => {
                            this.type = 'view';
                        }, 30)
                        this.getSingleRS(this.selectedTypeValue, id)
                    }
                },
                immediate: true
            }
        },
        methods: {
            viewDetail(id) {
                this.viewDetailVisible = true;
                this.viewDetailSendId = id
            },
            returnList() {
                this.$router.push({path: "./performanceIncentive"})
            },
            selectDialog(flag) {
                this.selectDialogVisible = flag;
                if (flag) {
                    this.revenueStandardValue = "";
                    this.revenueStandardList = [];
                    this.selectDialogInputValue = "";
                    this.getRevenueStandardList()
                } else {
                    if (this.revenueStandardValue) {
                        this.currentRevenueStandard = this.revenueStandardList.find((value) => {
                            return value.id === this.revenueStandardValue
                        });
                        this.currentRevenueStandard.nodeList = this.checkRepeatDev(this.currentRevenueStandard.nodeList)
                    }
                }
            },
            // 项目等级也只取   开发商类型
            checkRepeatDev(nodeList) {
                let nodeListMap = {};
                nodeList.forEach((item) => {
                    if (!nodeListMap[item.developerId || item.developId]) {
                        nodeListMap[item.developerId || item.developId] = item
                    }
                })
                let resNodeList = [];
                for (let key in nodeListMap) {
                    resNodeList.push(nodeListMap[key])
                }
                return resNodeList
            },


            changeStepIndex(index) {
                if (index === 2 && !this.currentRevenueStandard.version) {
                    this.$message({
                        message: '请选择标准！',
                        type: 'warning'
                    });
                } else {
                    this.stepIndex = index;
                }
                console.log(index);
            },
            selectDepartment(type) {
                this.departmentDialogVisible = type;
                // 开启穿梭框弹层
                if (type) {
                    // 清空选中值
                    this.department = [];

                    let temp = {};
                    if (this.selectedTypeValue === 'month') {
                        temp = this.currentRevenueStandard.nodeList[Number(this.tabsIndex)]
                    } else {
                        temp = this.currentRevenueStandard.nodeList[0]
                    }

                    // 若部门列表存在 且 有值， 禁用已选中的部门， 若没有， 释放部门
                    if (temp.departSettingList && temp.departSettingList.length) {
                        let selectArr = []
                        temp.departSettingList.forEach((item) => {
                            selectArr.push(item.departmentId);
                        })
                        this.departmentList.forEach((item, index) => {
                            this.$set(this.departmentList[index], 'disabled', selectArr.indexOf(item.id) > -1)
                        })
                    } else {
                        temp.departSettingList = [];
                        this.departmentList.forEach((item, index) => {
                            this.$set(this.departmentList[index], 'disabled', false)
                        })
                    }

                }
            },
            selectedDepartment() {
                console.log("选择的部门", this.department);
                let temp = {};
                if (this.selectedTypeValue === 'month') {
                    temp = this.currentRevenueStandard.nodeList[Number(this.tabsIndex)]
                } else {
                    temp = this.currentRevenueStandard.nodeList[0]
                }
                this.department.forEach((item) => {
                    temp.departSettingList.push({
                        departmentId: item,
                        departmentName: this.departmentListMap[item],
                        departmentProportion: "",
                    })
                })
                this.departmentDialogVisible = false;
            },
            getRevenueStandardList() {
                this.axios.post(api.getRevenueStandardList, {
                    version: this.selectDialogInputValue,
                    ruleEffect: this.selectedTypeValue === 'month' ? 1 : 2
                }).then((res) => {
                    this.revenueStandardList = res.data.data.list
                })
            },

            delDepartmentProportion(scope, item) {
                item.departSettingList.splice(scope.$index, 1)
            },
            replaceNum(value) {
                value = value.replace(/[^\d.]/g, '');
                value = value.replace(/\.{2,}/g, ".");
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                if (value.indexOf('.') < 0 && value != '') {
                    value = parseInt(value);
                }
                return value
            },
            checkGroupProportion(value, field) {
                value = this.replaceNum(value);
                setTimeout(() => {
                    this.$set(this.currentRevenueStandard, field, value)
                }, 30)
            },
            formatTwoDecimal(value, maxNumber, isIncludeMax) {
                value = value.replace(/[^\d.]/g, '');
                value = value.replace(/\.{2,}/g, ".");
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                if (value.indexOf('.') < 0 && value != '') {
                    value = parseInt(value);
                }
                // 设置最大限制
                if (maxNumber) {
                    const bool = isIncludeMax ? +value >= maxNumber : +value > maxNumber;
                    if (bool) {
                        let valueString = String(value)
                        value = valueString.slice(0, valueString.length - 1)
                    }
                }
                return value
            },
            checkProportion(value, index, subIndex) {
                value = this.formatTwoDecimal(value, 100);
                setTimeout(() => {
                    this.$set(this.currentRevenueStandard.nodeList[index].departSettingList[subIndex], 'departmentProportion', value)
                }, 30)
            },

            getAllDepartmentList() {
                this.axios.post(api.getAllDepartmentList, {}).then((res) => {
                    let departmentListMap = {};
                    this.departmentList = res.data.data;
                    this.departmentList.forEach((item) => {
                        departmentListMap[item.id] = item.departmentName
                    })
                    this.departmentListMap = departmentListMap;
                })
            },
            checkMonth() {
                let developerList = []
                let isEmptyDepartSettingListCount = [];
                let isErrorInfo = [];
                this.currentRevenueStandard.nodeList.forEach((item) => {

                    console.log(item);
                    
                    let departSettingList = []
                    if (item.departSettingList && item.departSettingList.length) {
                        let count = 0;
                        item.departSettingList.forEach((subItem) => {
                            departSettingList.push({
                                departmentId: subItem.departmentId,
                                departmentName: this.departmentListMap[subItem.departmentId],
                                departmentProportion: subItem.departmentProportion
                            })
                            count += +subItem.departmentProportion;
                            if (+subItem.departmentProportion === 0 || +subItem.departmentProportion > 100) {
                                isErrorInfo.push(item.developerName + "分配标准分配比例有误或未填写，请重新编辑！ (分配比例只能大于0小于100)")
                            }
                        });
                        if (+count !== 100) {
                            isErrorInfo.push(item.developerName + "分配标准 分配比例不等于100%，请重新编辑！")
                        }
                    } else {
                        // 若没有选择部门比例,  记录空list标识+1；
                        isEmptyDepartSettingListCount.push(item.developerName);
                    }
                    developerList.push({
                        developId: item.developerId || item.developId,
                        developName: item.developerName || item.developName,
                        projectLevelId: item.projectLevelId,
                        projectLevelName: item.projectLevelName,
                        departSettingList: departSettingList
                    })
                })
                let params = {
                    standardId: this.currentRevenueStandard.id,
                    ruleEffect: this.currentRevenueStandard.ruleEffect,
                    developerList: developerList
                };
                if (isErrorInfo.length) {
                    this.$confirm(isErrorInfo[0], '提示', {
                        confirmButtonText: '确定',
                        showCancelButton: false,
                        type: 'warning',
                        center: true
                    })
                    return false
                }
                if (isEmptyDepartSettingListCount.length === this.currentRevenueStandard.nodeList.length) {
                    this.$message({
                        message: '请至少设置一个分配标准',
                        type: 'warning'
                    });
                    return false;
                }
                if (isEmptyDepartSettingListCount.length === 0) {
                    this.saveMonth(params)
                } else {
                    this.$confirm('有标准未设置完成，是否保存?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                        this.saveMonth(params)
                    })
                }
            },
            // checkYear() {
            //     if (!this.currentRevenueStandard.groupProportion) {
            //         this.$message({
            //             message: '集团管理计提比例不能为空或0',
            //             type: 'warning'
            //         });
            //         return false;
            //     }
            //     if (+this.currentRevenueStandard.groupProportion >= 100) {
            //         this.$message({
            //             message: '集团管理计提比例必须小于100%',
            //             type: 'warning'
            //         });
            //         return false;
            //     }
            //     let isErrorInfo = [];
            //     let departSettingList = [];
            //     if (this.currentRevenueStandard.nodeList[0].departSettingList && this.currentRevenueStandard.nodeList[0].departSettingList.length) {
            //         let count = 0
            //         this.currentRevenueStandard.nodeList[0].departSettingList.forEach((item) => {
            //             count += +item.departmentProportion;
            //             departSettingList.push({
            //                 departmentId: item.departmentId,
            //                 departmentProportion: item.departmentProportion
            //             })
            //             if (+item.departmentProportion === 0 || +item.departmentProportion > 100) {
            //                 isErrorInfo.push("分配比例有误或未填写，请重新编辑！ (分配比例只能大于0小于100)")
            //             }
            //         })
            //         if (+count !== 100) {
            //             isErrorInfo.push("总分配比例不等于100%，请重新编辑！")
            //         }
            //     } else {
            //         this.$message({
            //             message: '请至少选择一个部门设置分配比例',
            //             type: 'warning'
            //         });
            //         return false;
            //     }
            //
            //     if (isErrorInfo.length) {
            //         this.$confirm(isErrorInfo[0], '提示', {
            //             confirmButtonText: '确定',
            //             showCancelButton: false,
            //             type: 'warning',
            //             center: true
            //         })
            //         return false
            //     }
            //     let params = {
            //         standardId: this.currentRevenueStandard.id,
            //         ruleEffect: this.currentRevenueStandard.ruleEffect,
            //         groupProportion: this.currentRevenueStandard.groupProportion,
            //         calNode: this.currentRevenueStandard.calNode + 1,
            //         departSettingList: departSettingList
            //     };
            //     this.saveYear(params)
            // },
            saveMonth(params) {
                console.log(params);
                this.axios.post(api.createRevenueAllotByMonth, params).then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            message: this.typeMap[this.type] + "成功",
                            type: 'success'
                        });
                        this.returnList();
                    }
                })
            },
            // saveYear(params) {
            //     this.axios.post(api.createRevenueAllotByYear, params).then((res) => {
            //         console.log(res);
            //         if (res.data.code === 200) {
            //             this.$message({
            //                 message: this.typeMap[this.type] + "成功",
            //                 type: 'success'
            //             });
            //             this.returnList();
            //         }
            //     })
            // },
            selectDate() {
                this.stepIndex = 1;
                if (this.currentRevenueStandard.ruleEffect === 1 && this.selectedTypeValue === "year" || this.currentRevenueStandard.ruleEffect === 2 && this.selectedTypeValue === "month") {
                    this.currentRevenueStandard = {}
                }
            },

            getSingleRS(type, id) {
                let currentData = {}
                this.axios.post(api.viewRevenueAllotByMonth, {
                    standardId: id
                }).then((res) => {
                    currentData = res.data.data;
                    return this.axios.post(api.getRevenueStandardList, {
                        standardId: currentData.standardId,
                        ruleEffect: this.selectedTypeValue === 'month' ? 1 : 2
                    }).then((res) => {
                        this.currentRevenueStandard = res.data.data.list[0]
                        this.tabsIndex = '0';
                        this.currentRevenueStandard.nodeList = this.checkRepeatDev(currentData.developerList)
                    })


                })
                //if (type === 'month') {
                // 3.0取消年
                // } else {
                //     let currentData = {}
                //     this.axios.post(api.viewRevenueAllotByYear, {
                //         standardId: id
                //     }).then((res) => {
                //         currentData = res.data.data;
                //         return this.axios.post(api.getRevenueStandardList, {
                //             standardId: currentData.standardId,
                //             ruleEffect: this.selectedTypeValue === 'month' ? 1 : 2
                //         })
                //     }).then((res) => {
                //
                //         this.currentRevenueStandard = res.data.data.list[0];
                //         this.currentRevenueStandard.calNode = currentData.calNode - 1;
                //         this.currentRevenueStandard.groupProportion = currentData.groupProportion;
                //         this.currentRevenueStandard.nodeList = [{departSettingList: []}];
                //
                //         currentData.departSettingList.forEach((item) => {
                //             console.log(item);
                //             if (item.departmentId) {
                //                 this.currentRevenueStandard.nodeList[0].departSettingList.push({
                //                     departmentId: item.departmentId,
                //                     departmentName: this.departmentListMap[item.departmentId],
                //                     departmentProportion: item.departmentProportion,
                //                 })
                //             }
                //         })
                //     })
                // }
            }
        },
        components: {
            revenueSettlementHandle
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
    .selectedInterval-item {
        padding: 0 20px;
        position: relative;
        label {
            display: flex;
            align-items: center;
            > span {
                display: inline-block;
                margin-top: 20px;
            }
        }
        .selectedInterval-item-row {
            line-height: 25px;
        }
        .viewDetail {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -20px;
        }
    }

    .selectedType {
        padding: 20px;
        margin: 20px 0;
        font-size: 14px;
        border: 1px solid #ccc;
        width: 200px;
        div {
            margin: 5px 0;
        }
    }
</style>
